<template>
  <a-modal
    title="导入数据"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="bankLevelManagerImportVisiable">

    <div style="width: 100%">
      <div class="option-area">
        <a-upload
          class="upload-area"
          :fileList="fileList"
          :remove="handleRemove"
          :disabled="fileList.length === 1"
          :beforeUpload="beforeUpload">
          <a-button>
            <a-icon type="upload"/>
            选择.xlsx文件
          </a-button>
        </a-upload>
        <div class="button-area">
          <a-button type="primary" @click="downloadTemplate" style="margin-right: .5rem">
            模板下载
          </a-button>
          <a-button
            @click="handleUpload"
            :disabled="fileList.length === 0"
            :loading="uploading"
            v-has-permission="['bankLevelManager:import']">
            {{uploading ? '导入中' : '导入Excel' }}
          </a-button>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="['bankLevelManager:import']"/>
        </div>
      </div>
    </div>

  </a-modal>
</template>
<script>
import ImportResult from "../../../../others/ImportResult";

export default {

  components: {ImportResult},

  name: "BankLevelManagerImport",

  data() {
    return {
      fileList: [],
      importData: [],
      times: '',
      errors: [],
      uploading: false,
      importResultVisible: false,
      loading: false
    }
  },

  props: {
    bankLevelManagerImportVisiable: {
      default: false
    },
    brandInstId: '',
  },

  computed: {
    show: {
      get: function () {
        return this.bankLevelManagerImportVisiable
      },
      set: function () {
      }
    },
  },

  methods: {
    onClose() {
      // this.reset()
      this.fileList = []
      this.$emit('close')
    },

    handleClose() {
      this.importResultVisible = false
    },
    downloadTemplate() {
      this.$download('/admin/quota/bankLevelManager/getExcel', {}, '商户组别限额管理导入模板.xlsx');
    },

    handleRemove(file) {
      if (this.uploading) {
        this.$message.warning('文件导入中，请勿删除')
        return
      }
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleUpload() {
      const {fileList} = this
      let formData = new FormData()
      formData.append('file', fileList[0])
      formData.append('instId',this.$attrs.instId)
      this.uploading = true
      this.$upload('/admin/quota/bankLevelManager/upload', formData).then((r) => {
        let data = r.data
        this.uploading = false
        this.fileList = []
        if (data.code=="100000"){
          this.$emit('success')
        }else {
          this.$message.error(data.message)
        }
      })
      //   const params = {};
      //
      //   Object.assign(params, this.dataSource, {
      //     instId: this.$attrs.instId,
      //     excelFile: fileList[0],
      //   });
      //   debugger;
      //   this.uploading = true
      //   this.$post('/admin/quota/merchantGradeManager/upload', params);
      // },
    }}}
</script>

<style lang="less" scoped>
@import "../../../../../../static/less/Common";

.option-area {
  display: inline-block;
  width: 100%;
  padding: 0 .9rem;
  margin: .5rem 0;

  .upload-area {
    display: inline;
    float: left;
    width: 50%
  }

  .button-area {
    margin-left: 1rem;
    display: inline;
    float: right;
    width: 30%;
  }
}
</style>
